<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <div>
        <div align="center">
            <h3>EMPRESA: #{saleDocumentsController.shop.companyId.name}</h3>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-4">
                <h5>RUC: <strong>#{saleDocumentsController.shop.companyId.ruc}</strong></h5>
                <h5>TIENDA: <strong>#{saleDocumentsController.shop.name}</strong></h5>
            </div>
            <div class="col-lg-4">
                <h5>TELÉFONO: <strong>#{saleDocumentsController.shop.phone}</strong></h5>
                <h5>DIRECCIÓN: <strong>#{saleDocumentsController.shop.address}</strong></h5>
            </div>
            <div class="col-lg-4">
                <h5>CONTACTO: <strong>#{saleDocumentsController.shop.contact}</strong></h5>
            </div>
        </div>
        <hr/>
    </div>
    <div>
        <h:form id="frmDataInput" style="clear: left">
            <p:panel id="panelPayType" style="float: left;"><!--style="margin: 20px 0 0 600px; float: left"--><!--style="margin: 20px 0 0 245px; float: left; clear: left; width: 500px;"-->
                
                <p:outputLabel value="TIPO DE PAGO: " style="float: left; margin: 4px 10px 0 0" for="options"/>
                <p:selectOneRadio id="options" value="#{saleDocumentsController.saleProduct.typeMoney}" style="float: left; " required="true">  
                    <f:selectItem itemLabel="Soles" itemValue="SOLES"/>
                    <f:selectItem itemLabel="Dolares" itemValue="DOLARES"/>
                </p:selectOneRadio>
                
                <p:outputLabel value="FECHA: " style="float: left; margin: 4px 0 0 20px" for="outPutDate"/>
                <p:calendar id="outPutDate" locale="es" size="30" style="float: left; margin: 0 0 0 10px" required="true"
                            value="#{saleDocumentsController.saleProduct.dateSale}"
                                placeholder="Fecha de Emisión" pattern="dd-MM-yyyy HH:mm"
                                navigator="true"/>
                
                <p:outputLabel value="IGV: " style="float: left; margin: 4px 0 0 20px" for="igv"/>
                <p:spinner id="igv" value="#{saleDocumentsController.saleProduct.igv}" style="float: left; margin: 0 0 0 10px" required="true"/>
                
                <p:outputLabel value="N° Documento: " style="float: left; margin: 4px 0 0 20px" for="docNumber"/>
                <p:inputText id="docNumber" value="#{saleDocumentsController.saleProduct.numberDocument}" 
                           style="float: left; margin: 0 0 0 10px" required="true" maxlength="6"/>
            </p:panel>
            
            <p:panel id="clientData" style="margin-top: 20px; float: left; ">
                <p:outputLabel for="clientFullName" value="Señor (es): "/> 
                <p:spacer width="10"/>
                <p:inputText id="clientFullName" value="#{saleDocumentsController.client.fullName}" required="true" size="47"/>  
                <p:spacer width="10"/>
                <!--<p:commandButton value="Buscar" oncomplete="PF('selectionClientDialog').show()" update=":frmClientSelect"/>-->
                <p:commandLink styleClass="btn btn-default btn-primary" 
                               oncomplete="PF('selectionClientDialog').show()" update=":frmClientSelect">
                    <i class="glyphicon glyphicon-search"/>
                    BUSCAR CLIENTE
                </p:commandLink>
                
                <p:spacer width="10"/>
                <p:outputLabel for="ruc" value="R.U.C. " />
                <p:spacer width="10"/>
                <p:inputText id="ruc" value="#{saleDocumentsController.client.document}" required="true" size="11"/>

                <p:spacer width="10"/>
                <p:outputLabel for="addressId" value="Dirección: " />
                <p:spacer width="10"/>
                <p:inputText id="addressId" value="#{saleDocumentsController.client.address}" required="true" size="56"/>
            </p:panel>
            
            <p:panel id="productShopData" style="float: left; margin-top: 20px; clear: left">
                <p:outputLabel value="Producto: *" /> 
                <p:spacer width="10"/>
                <p:inputText id="productShopFullName" value="#{saleDocumentsController.productShop.productId.fullName}" 
                             size="60"/>  
                <p:spacer width="10"/>
                <!--<p:commandButton value="Buscar" oncomplete="PF('selectionProductShopDialog').show()" update=":frmProductShopSelect"/>-->
                <p:commandLink styleClass="btn btn-default btn-primary" oncomplete="PF('selectionProductShopDialog').show()"
                               update=":frmProductShopSelect">
                    <i class="glyphicon glyphicon-search"/>
                    BUSCAR PRODUCTO
                </p:commandLink>
            <!--    </p:panel>
                
            <p:panel id="detSaleProd" style="float: left;">-->
                <p:spacer width="20"/>
                <p:outputLabel value="Cantidad: *" />  
                <p:spacer width="10"/>
                <p:inputText id="detSalProdAmount" value="#{saleDocumentsController.detailSaleProduct.amount}" size="8"/>

                <p:spacer width="20"/>
                <p:outputLabel value="Precio Unitario: *" />
                <p:spacer width="10"/>
                <p:inputText id="detSalProdPrice" value="#{saleDocumentsController.detailSaleProduct.priceUnit}" size="9"/>
                <p:spacer width="20"/>
                <!--<p:commandButton value="Agregar" actionListener="#{saleDocumentsController.addProductToBasket()}"
                                 update=":frmDetSaleProduct:tblDetSaleProduct,productShopData"/>-->
                <p:commandLink styleClass="btn btn-default btn-primary" update=":frmDetSaleProduct:tblDetSaleProduct,productShopData"
                               actionListener="#{saleDocumentsController.addProductToBasket()}">
                     <i class="glyphicon glyphicon-hdd"/>
                     AGREGAR
                 </p:commandLink>
            </p:panel>
            
            <p:panel id="saveTicket" style="margin: 20px 0 0 350px; float: left">
                <p:commandLink styleClass="btn btn-default btn-primary" update=":frmDetSaleProduct:tblDetSaleProduct, @form"
                               actionListener="#{saleDocumentsController.saveInvoice()}">
                     <i class="glyphicon glyphicon-hdd"/>
                     GRABAR FACTURA
                 </p:commandLink>
                <p:spacer width="15"/>
                <p:commandLink styleClass="btn btn-default btn-primary" update="frmDataInput, :frmDetSaleProduct:tblDetSaleProduct"
                               actionListener="#{saleDocumentsController.initValuesSaleDocument()}">
                     <i class="glyphicon glyphicon-hdd"/>
                     CANCELAR FACTURA
                 </p:commandLink>
            </p:panel>
        </h:form>
    </div>
    
    <div>
        <h:form id="frmDetSaleProduct">
            <p:dataTable id="tblDetSaleProduct" style="width: 750px; padding: 30px 0 0 0; clear: left; margin-left: 150px" 
                         var="detail" value="#{saleDocumentsController.listDetailSaleProduct}" emptyMessage="No existe registros">
                <p:column style="width: 10%">  
                    <p:commandButton id="btnDelProdSelec" update="tblDetSaleProduct" value="Eliminar"
                                     actionListener="#{saleDocumentsController.removeSalProductDetail(detail)}">
                    </p:commandButton>
                    <!--<p:commandButton id="btnUpProdSelec" value="Act" oncomplete="PF('selectionDetProductShopDialog').show()"
                                     update=":frmDetProductShopSelect">
                        <f:setPropertyActionListener value="#{detail}" target="#{saleDocumentsController.detailSaleProduct}" />
                    </p:commandButton>-->
                </p:column>
                <p:column headerText="Cantidad" style="width: 10%">  
                    <p:outputLabel value="#{detail.amount}" style="text-align: center"/>  
                </p:column>  

                <p:column headerText="Descripción" style="width: 40%">  
                    <p:outputLabel value="#{detail.productId.fullName}" style="text-align: center"/>  
                </p:column>

                <p:column headerText="Precio. Unitario" style="width: 10%">  
                    <p:outputLabel value="#{detail.priceUnit}" style="text-align: center"/>  
                </p:column>  
                <p:columnGroup type="footer">
                    <p:row>
                        <p:column colspan="3" footerText="SUB-TOTAL:" style="text-align: right"/>
                        <p:column footerText="#{saleDocumentsController.calculateSubTotal}"/>
                    </p:row>
                    <p:row>
                        <p:column colspan="3" footerText="I.G.V:" style="text-align: right"/>
                        <p:column footerText="#{saleDocumentsController.calculateIgv}"/>
                    </p:row>
                    <p:row>
                        <p:column colspan="3" footerText="TOTAL:" style="text-align: right"/>
                        <p:column footerText="#{saleDocumentsController.calculateTotalAmount}"/>
                    </p:row>
                </p:columnGroup>
            </p:dataTable>
            <p:outputLabel value="#{saleDocumentsController.showDate}" style="margin-left: 450px"/>
        </h:form>
    </div>
    <h:form id="frmClientSelect">
        <p:dialog id="clientDialogSelect" widgetVar="selectionClientDialog" modal="true">  

            <p:dataTable id="tblClients" var="clientSelected" value="#{saleDocumentsController.listClient}" rowKey="#{clientSelected.id}"
                         selection="#{saleDocumentsController.client}" selectionMode="single" paginator="true" rows="10"  
            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="5,10,15" style="width:1000px">  

                <f:facet name="header">  
                   Lista de Clientes
                </f:facet>	  

                <p:column headerText="Código" style="width:5%">  
                    <h:outputText value="#{clientSelected.id}" />  
                </p:column>  

                <p:column headerText="Doc. Identidad" style="width:10%">
                    <h:outputText id="doc" value="#{clientSelected.document}" />
                </p:column>

                <p:column headerText="Nombres y Apellidos" style="width:20%">
                    <h:outputText id="fullName" value="#{clientSelected.fullName}" />
                </p:column>

                <p:column headerText="Dirección" style="width:17%">
                    <h:outputText value="#{clientSelected.address}" />
                </p:column>

                <p:column headerText="Telefono" style="width:8%">
                    <h:outputText value="#{clientSelected.phone}" />
                </p:column>

                <f:facet name="footer">  
                    <p:commandButton id="addC" value="Aceptar"  
                            update=":frmDataInput:clientData" oncomplete="PF('selectionClientDialog').hide()">
                        <f:setPropertyActionListener value="#{saleDocumentsController.client}" target="#{saleDocumentsController.client}" />
                    </p:commandButton>
                    <p:spacer width="10"/>
                    <p:commandButton id="cancelC" value="Cancelar"  
                            oncomplete="PF('selectionClientDialog').hide()">
                    </p:commandButton>
                </f:facet>
            </p:dataTable>    
        </p:dialog> 
    </h:form>

    <h:form id="frmProductShopSelect">
        <p:dialog id="prdShopDialog" header="Productos de Tienda:. #{saleDocumentsController.shop.name}" 
                  widgetVar="selectionProductShopDialog" modal="true" closable="false">  

            <p:dataTable id="tblProdShop" var="prodShop" value="#{saleDocumentsController.lazyModelProductShop}" rowKey="#{prodShop.id}"
                         selection="#{saleDocumentsController.productShop}" selectionMode="single" paginator="true" rows="10" 
                         lazy="true"
            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="5,10,15" style="width:1000px">  

                <f:facet name="header">  
                   Lista de Productos
                </f:facet>	  

                <p:column headerText="Código" style="width:5%">  
                    <h:outputText id="prodShopId" value="#{prodShop.id}" />  
                </p:column>  

                <p:column headerText="categoría" style="width:10%">
                    <h:outputText id="prodShopCat" value="#{prodShop.productId.categoryId.name}" />
                </p:column>

                <p:column headerText="Marca" style="width:20%">
                    <h:outputText id="prodShopMark" value="#{prodShop.productId.markId.name}" />
                </p:column>

                <p:column headerText="Tipo de Unidad" style="width:10%">
                    <h:outputText id="prodShopUnitType" value="#{prodShop.productId.unitTypeId.name}" />
                </p:column>

                <p:column headerText="Producto" style="width:17%">
                    <h:outputText  id="prodShopProd" value="#{prodShop.productId.name}" />
                </p:column>

                <p:column headerText="Stock" style="width:8%">
                    <h:outputText id="prodShopStock" value="#{prodShop.amount}" />
                </p:column>

                <f:facet name="footer">  
                    <p:commandButton id="addPS" value="Aceptar"
                            update=":frmDataInput:productShopData" oncomplete="PF('selectionProductShopDialog').hide()">
                    </p:commandButton>
                    <p:spacer width="10"/>
                    <p:commandButton id="cancelPS" value="Cancelar" actionListener="#{saleDocumentsController.CleanObjectProductShop()}"
                            oncomplete="PF('selectionProductShopDialog').hide()">
                    </p:commandButton>
                </f:facet>
            </p:dataTable>    
        </p:dialog> 
    </h:form>
    
    <!--<h:form id="frmDetProductShopSelect">
        <p:dialog header="Actualizar" widgetVar="selectionDetProductShopDialog" id="dUpDetProdDlg"  
                  showEffect="fade" hideEffect="explode" modal="true">  
            <h:panelGrid id="pgUpDetProdShop" columns="2" cellpadding="4" style="margin:0 auto;">  

                <p:outputLabel value="Producto:" />  
                <p:outputLabel value="#{saleDocumentsController.detailSaleProduct.productId.fullName}"/>  

                <p:outputLabel value="cantidad:" />  
                <p:inputText value="#{saleDocumentsController.detailSaleProduct.amount}" size="10"/>  

                <p:outputLabel value="Precio Unitario:" />  
                <p:inputText value="#{saleDocumentsController.detailSaleProduct.priceUnit}" size="10"/>  

                <f:facet name="footer">
                        <p:separator />
                        <p:commandButton id="btnActProd" update=":frmDetSaleProduct:tblDetSaleProduct, :frmDataInput:productShopData"
                                         value="Guardar" actionListener="#{saleDocumentsController.updateSaleProductDetail()}"
                                                        oncomplete="PF('selectionDetProductShopDialog').hide()"/>
                        <p:commandButton id="btnActCancelar" oncomplete="PF('selectionDetProductShopDialog').hide()" value="Cancelar" />
                </f:facet>
            </h:panelGrid>  
        </p:dialog>  
    </h:form>-->

</ui:composition>

